<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/student/index' }">实训案例</el-breadcrumb-item>
                <el-breadcrumb-item>制作业务流程</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="content-box">
            <div class="production-business-process">
                <div class="process-menu">
                    <ul>
                        <li v-for="(item, index) in itemListData" :class="{active: item.id == itemId}" >
                            <span @click="tab(item.id)">{{ item.name }}</span>
                            <img src="./../../assets/images/menu_edit_icon.png" @click="addItem(2, item.id, item.name)"/>
                            <img src="./../../assets/images/menu_delete_icon.png" @click="deleteItem(item.id)" />
                        </li>
                    </ul>
                    <div class="process-menu-add" @click="addItem(1)">
                        <img src="./../../assets/images/new_add_icon.png" />
                    </div>
                </div>
                <div class="production-business-process-box">
                    <el-upload
                        class="image-uploader"
                        action="123"
                        list-type="picture-card"
                        :file-list="fileList"
                        :on-preview="handlePictureCardPreview"
                        :before-upload="beforeAvatarUpload"
                        :before-remove="beforeAvatarRemove"
                        :multiple="true"
                        :on-change='changeUpload'>
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
	export default {
		data() {
			return {
                projectId: '',
                dialogImageUrl: '',
                fileList: [],
                dialogVisible: false,
                itemListData: [],
                itemId: '',
                fileNameList: [],
                delFileNameList: []
            }
        },
        created () {
            this.projectId = JSON.parse(window.localStorage.getItem('teacher-project-id')).itemId
            this.init() //初始化
        },
        methods: {
            init(status){
                let self = this
                self.fileList = []
                self.fileNameList = []
                self.$http.get('/dataplatform/businessFlow/listDataName?itemId='+self.projectId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.itemListData = res.data
                        if(self.itemId == ''){
                            self.itemId = res.data[0].id
                        }
                        //status区分添加，删除，修改
                        if(status == 'add'){
                            self.itemId = res.data[res.data.length-1].id
                        }else if(status == 'del'){
                            self.itemId = res.data[0].id
                        }
                        self.listDetail()
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })

            },
            listDetail(){
                let self = this
                self.$http.get('/dataplatform/businessFlow/detail?id='+self.itemId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.fileList = []
                        self.fileNameList = []
                        if((res.data.picNames || res.data.picUrl) != null){
                            for(let i = 0; i < res.data.picNames.length; i++){
                                let fileJson = {}
                                let fileNameJson = {}
                                fileJson.name = res.data.picNames[i]
                                fileJson.url = res.data.picUrl[i]
                                self.fileList.push(fileJson)
                                self.fileNameList.push(res.data.picNames[i])
                            }
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //添加或编辑item
            addItem(type, id, name) {
                let self = this
                let promptData = {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern:  /\S/,
                    inputErrorMessage: '请输入案例名称'
                }
                if(type == 2){
                    promptData.inputValue = name
                }
                self.$prompt('案例名称', promptData).then(({ value }) => {
                    let data = {}
                    if(type == 1){
                        data = {
                            itemId: self.projectId,
                            name: value
                        }
                    }else if(type == 2){
                        data = {
                            id: id,
                            itemId: self.projectId,
                            name: value
                        }
                    }
                    self.$http.post('/dataplatform/businessFlow/updateName',data).then(response => {
                        let res = response.data
                        if(res.code == '200') {
                            if(type == 1){
                                self.$message({
                                    type: 'success',
                                    message: '添加成功'
                                })
                                self.init('add')
                            }else{
                                self.$message({
                                    type: 'success',
                                    message: '修改成功'
                                })
                                self.init('modify')
                            }
                        }else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }).catch(() => {
                })
            },
            tab(index){
                this.itemId = index
                this.listDetail()
            },
            deleteItem(id) {
                let self = this
                self.$confirm('确定删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.$http.get('/dataplatform/businessFlow/delete?ids='+id).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                type: 'success',
                                message: '删除成功'
                            })
                            self.init('del')
                        }else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }).catch(() => {
                })
            },
            beforeAvatarRemove(file, fileList){
                let self = this

                return self.$confirm('确定删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                     self.delFileNameList.push(file.name)
                    self.$http.post('/dataplatform/businessFlow/deletePics',{
                        id: self.itemId,
                        picNames: self.delFileNameList
                    }).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                type: 'success',
                                message: '删除成功'
                            })
                        }else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }).catch(() => {
                    console.log
                })
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            changeUpload(file, fileList) {
                this.fileList = fileList
            },
            // 图片长传-之前
            beforeAvatarUpload(file,fileList) {
                let self = this
                if(self.itemListData.length == 0){
                     self.$message({
                        message: '请先添加案例导航',
                        type: 'warning'
                    })
                    return
                }
                if(file.type !== 'image/jpeg' && file.type !== 'image/jpg' && file.type !== 'image/png' && file.type !== 'image/bmp'){
                    self.$message.error('上传图片格式只能是 jpg,png,jpeg,bmp 格式!')
                    return
                }

                let fd = new FormData()
                    fd.append('files', file)
                    fd.append('width', 1380)
                    fd.append('high', 600)
                self.$http.post('/dataplatform/common/upload/file',fd).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.fileNameList = []
                        for(let i = 0; i < res.data.length; i++){
                            let fileJson = {}
                            let fileNameJson = {}
                            fileJson.name = res.data[i].fileName
                            fileJson.url = res.data[i].mappingFilePath
                            self.fileList.push(fileJson)
                            self.fileNameList.push(res.data[i].fileName)
                        }
                        self.createPic()    //上传
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            createPic(){
                let self = this
                self.$http.post('/dataplatform/businessFlow/createPics',{
                    id: self.itemId,
                    picNames: self.fileNameList
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            type: 'success',
                            message: '上传成功'
                        })
                    }
                })
            }
        }
	}
</script>

<style>
.image-uploader .el-upload--picture-card{
    width: 226px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: solid 2px #f2f3f3;
}
.image-uploader .el-upload--picture-card i {
    font-size: 60px;
    font-weight: bold;
    margin-top: 60px;
    display: block;
    color: #7393bc;
}
.image-uploader .el-upload-list--picture-card{
    margin-top: 20px;
    height: 100%;
}
.image-uploader .el-upload-list--picture-card .el-upload-list__item{
    width: 226px;
    height: 200px;
    line-height: 200px;
    margin-bottom: 20px;
}
.image-uploader .el-upload-list__item.is-success .el-upload-list__item-status-label .el-icon-upload-success{
    position: absolute;
    left: 15px;
}
</style>

